<template>
	<div id='order-info-submit'>
		<div class='order-img-info'>
			<el-row :gutter='5' style='height:100%;'>
				<el-col style='height:100%' :span='8'>
					<img :src="val.image" alt="goods" width='100%' height='100%'>
				</el-col>
				<el-col :span='16' style='position:relative;height:100%;'>
					<h1 class='order-title'>{{val.goodsName}}</h1>
					<template v-if='val.goodsPropertyJson'>
						<span style='font-size:15px;color:#999;' v-for="(zhi,index) in JSON.parse(val.goodsPropertyJson)">
							<span v-for="(guige,key) in zhi" :key='key'>
								{{guige}}
							</span>
						</span>
					</template>
					<p class='price-count'>
						<span>￥{{money(val.price)}}</span>
						<span class='count'>X {{val.count}}</span>
					</p>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {_money} from '@/comm.js';
	export default {
		props:['val'],
		data(){
			return ({
				// remarkVal:''
			});
		},
		methods:{
			// remark(){
			// 	this.$emit('remark',this.remarkVal,val);
			// },
			money(val){
				return _money(val);
			}
		}
	}
</script>

<style scoped>
	#order-info-submit{
		height: 125px;
		padding: 1rem 1rem 0 1rem;
		background: white;
	}
	.order-img-info{
		height: 104px;
		padding-bottom: 20px;
		border-bottom: 1px solid #efefef;
	}
	.order-title{
		font-size:17px;
		letter-spacing: 3px;
		margin-bottom: 8px;
	}
	.price-count{
		position:absolute;
		bottom: 0;
		font-size:13px;
		width: 100%;
	}
	.price-count .count{
		display: inline-block;
		float:right;
		margin-right: 3px;
		font-size:15px;
	}
</style>